<template>
  <div class='w-screen h-screen relative' :class='[...classlist]'>
    <!--    背景图片的div-->
    <div class='absolute inset-0 bg-blue-200 -z-1'></div>
    <div class='w-400px h-300px flex justify-evenly items-center flex-col bg-white bg-opacity-30 p-3'
         :class="[useraction.loginplacement==='top'?'mt-100px':useraction.loginplacement==='right'?'mr-100px':'']">
      <div>
        <h1 class='w-full mb-2 titletext text-center'>OA系统</h1>
        <h1 class='w-full text-center'>帐号admin,密码88888888</h1>
      </div>
      <flexform ref='formRef' :formList='formList' :formValue='formValue' :labelWidth='60' class='w-full'>
        <template #code='{formitem}'>
          <n-form-item label='验证码:' path='code' :rule='formitem.rules || []'>
            <div class='w-full flex justify-center items-center'>
              <n-input v-model:value='formValue.code' placeholder='请输入验证码' @keyup.enter='denglu'></n-input>
              <n-image preview-disabled :src='imgbs64' alt='验证码' class='w-120px h-30px flex-shrink-0'
                       @click='shuaxinimg'></n-image>
            </div>
          </n-form-item>
        </template>
      </flexform>
      <n-button class='w-full' @click='denglu'>登录</n-button>
    </div>
    <div v-if='loginzhezhao' class='absolute inset-0 z-1000 bg-gray-500 bg-opacity-50 juzhong1'>
      <div class='w-200px h-400px p-3'>
        <div v-for='item in loginmsglist' :key='item' class='p-1' >
          {{ item }}
        </div>
        <div class='juzhong1'>
          <n-button v-show='closezhezhao' @click='loginzhezhao=false'>关闭</n-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name='Login' lang='ts'>
import { useRouter } from 'vue-router'
import { useUserInfo } from '../../store/moduls/userinfo'
import { useMyRouter } from '../../store/moduls/usemyroute'
import { ref, computed } from 'vue'
import { FormItemRule, useMessage } from 'naive-ui'
import http from '../../request/request'

const formRef = ref<any>(null)
const message = useMessage()
// 校验计算结果
const checknum = (rule: FormItemRule, value: string) => {
  const regx = /^\d*$/
  if (!value) {
    return true
  } else if (value.length > 10) {
    return Error('请输入长度10位以内的数字')
  } else if (!regx.test(value)) {
    return Error('请输入数字')
  } else {
    return true
  }
}
// 登录的遮罩层
const loginzhezhao = ref(false)
const closezhezhao = ref(false)
// 登录信息列表
const loginmsglist = ref([])

const router = useRouter()
const useraction = useUserInfo()
const myrouter = useMyRouter()
// 登录框的样式
const classlist = computed(() => {
  switch (useraction.loginplacement) {
    case 'top':
      return ['flex justify-center']
    case 'right':
      return ['flex items-center lg:justify-end  lg:pr-100px sm:justify-center']
    case 'center':
      return ['flex justify-center items-center']
  }
})
const formValue = ref({ codeid: '' })   // 表单数据
const formList = ref([
  {
    label: '账号',
    key: 'username',
    type: 'input',
    rules: [
      {
        required: true,
        message: '请输入账号',
        trigger: ['input', 'change', 'blur'],
      },
      {
        max: 200,
        min: 2,
        message: '请输入2-200为的字符',
        trigger: ['input', 'change', 'blur'],
      },
    ],
  },
  {
    label: '密码',
    key: 'password',
    type: 'input',
    password: 'password',
    rules: [
      {
        required: true,
        message: '请输入密码',
        trigger: ['input', 'change', 'blur'],
      },
      {
        max: 200,
        min: 2,
        message: '请输入2-200为的字符',
        trigger: ['input', 'change', 'blur'],
      },
    ],
  },
  {
    label: '验证码',
    key: 'code',
    slot: 'code',
    type: 'input',
    rules: [
      {
        required: true,
        message: '请输入验证码',
        trigger: ['input', 'change', 'blur'],
      },
      {
        validator: checknum, trigger: ['input', 'change', 'blur'],
      },
    ],
  },
])    // 表单配置
const imgbs64 = ref('')

const shuaxinimg = () => {
  http.getcode().then((res:any) => {
    if (res.data.code === 0) {
      formValue.value.codeid = res.data.data.codeid
      imgbs64.value = res.data.data.imgurl
    } else {
      message.error(res.data.error || '验证码刷新失败')
    }
  })
}

// 点击登录
const denglu = () => {
  formRef.value?.jiaoyan((data: any) => {
    http.login(data).then((res:any) => {
      console.log(res, '返回的结果')
      if (res.data.code === 0) {
        message.success('登录成功')
        useraction.denglu(res.data.data)
        router.push({ name: myrouter.guhuakey })
      }
    })
  })
}

const init = () => {
  shuaxinimg()
}

// 初始化区域
init()
</script>

<style scoped>

</style>
